<template>
  <div class="main_box">
    <div class="top_box">
      <!-- 北京大学工会职工节日慰问品电商平台采购 -->
    </div>
    <div class="showTheLogin">
      <div class="loginCent">
        <!-- <nav>
        <div class="hiddenLoginBtn">
          <a class="el-icon-close" @click="hiddenLoginBtn" />
        </div>
      </nav> -->
        <div class="loginForm">
          <!-- <div class="loginTit" v-text="isRegistered == '1' ? '注册' : '登录'"></div> -->
          <!-- <div class="title" v-text="isRegistered !== '1' ? '登录' : '用户注册'"></div> -->
          <div class="loginFormBox">
            <div class="top_login">
              <div class="top_login_text">
                <div @click="loginWay(2)" :class="{activeLogin:!codeOrPassword}">短信登录
                </div>
                <div @click="loginWay(1)" :class="{activeLogin:codeOrPassword}">
                  <!-- 账号登录 -->
                </div>
              </div>
            </div>
            <div class="content_box" v-if="codeOrPassword">
              <div class="inputBox" style="margin-top:16px">
                <el-input v-model="accountInfo.name" placeholder="输入用户账号">
                  <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template>
                </el-input>
              </div>
              <div class="inputBox">
                <el-input type="password" v-model="accountInfo.password" placeholder="输入登录密码" @keyup.enter.native="loginPass">
                  <template slot="prepend">
                    <span class="icon iconfont">&#xe62e;</span>
                  </template>
                </el-input>
              </div>
              <div class="forget_pass">
                <a @click="forgetPassword">忘记密码?</a>
              </div>
            </div>
            <div class="content_box" v-if="!codeOrPassword">
              <div class="loginTitle">
                <div class="content">
                  <span v-text="isRegistered === '1' ? '已有账户？' : '第一次使用优易捷商城？'"></span>
                  <u @click="registered" v-text="isRegistered === '1' ? '立即登录' : '用户注册'"></u>
                </div>
              </div>
              <div class="inputBox">
                <el-input v-model="userName" placeholder="输入手机号">
                  <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template>
                </el-input>
              </div>
              <div class="inputBox inputBox_code">
                <el-input style="width: 172px;" v-model="verificationCode" placeholder="输入验证码" @keyup.enter.native="login">
                  <template slot="prepend">
                    <span class="icon iconfont">&#xe62e;</span>
                  </template>
                </el-input>
                <div>
                  <span v-show="codeShow" class="codeBtn" @click="getCode">获取验证码</span>
                  <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span>
                </div>
              </div>

              <div class="noLogin" :class="{registered: isRegistered === '1'}">
                <el-checkbox v-show="isRegistered === '2'" v-model="isNoLogin">七天免登录</el-checkbox>
                <span></span>
              </div>
              <div class="loginProtocol" v-if="isRegistered === '1'">
                <el-checkbox v-model="haveRead"></el-checkbox>
                <span>阅读并同意</span>
                <span @click="readAgreement">《优易捷科技商城 服务协议》</span>
              </div>
            </div>
            <div class="loginBtn_box" style="">
              <el-button v-if="!codeOrPassword" class="loginBtn" @click="login" v-text="isRegistered === '1' ? '注册' : '立即登录'" :loading="loadingLogin">立即登录</el-button>
              <el-button v-else class="loginBtn" @click="loginPass" :loading="loadingLoginPass" v-text="'立即登录'">立即登录</el-button>
            </div>
          </div>

        </div>
      </div>
      <el-dialog title="服务协议" :visible.sync="dialogAgreement" width="1000px">
        <img style="width:100%" src="https://vpigshop.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230803142500.png" alt="">
      </el-dialog>
      <el-dialog class="Improve_info" title="完善个人信息" :visible.sync="improveInfo" width="600px">
        <ImproveInfo @emitImproveInfo="emitImproveInfo"></ImproveInfo>
      </el-dialog>
      <el-dialog class="forget_dialog" title="" :visible.sync="forgetPass" width="820px" @close="forgetClose">
        <div>
          <div class="top_for">
            <img src="https://vpigshop.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230825112509.png" alt="">
            <div>找回密码</div>
          </div>
          <div class="bot_for" v-if="retrieveShow1">
            <div class="inputBox">
              <div class="text">手机号</div>
              <el-input style="width: 290px;" v-model="retrievePass.phone" placeholder="输入手机号">
                <!-- <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template> -->
              </el-input>
            </div>
            <div class="inputBox">
              <div class="text">验证码</div>
              <div class="inputBox_code" style="flex:1">
                <el-input style="width: 150px;" v-model="retrievePass.code" placeholder="输入验证码">
                  <!-- <template slot="prepend">
                  <span class="icon iconfont">&#xe62e;</span>
                </template> -->
                </el-input>
                <div>
                  <span v-show="codeShow" class="codeBtn" @click="getCodePass">获取验证码</span>
                  <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span>
                </div>
              </div>
            </div>
            <span class="codeBtn next_box " @click="nextStep">下一步</span>
            <div style="margin-left:60px;margin-top:28px">
              <div>
                <a @click="loginBack" style="display:flex;justify-content: center;" class="back_login"> <img style="width: 16px;height: 16px;margin-right:5px" src="https://vpigshop.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230825112519.png" alt="">
                  <div style="font-size: 14px;color: #1C72F3;">
                    返回登录</div>
                </a>
              </div>
            </div>
          </div>
          <div class="bot_for" v-else>
            <div class="inputBox">
              <div class="text">重置密码</div>
              <el-input type="password" style="width: 280px;margin-left: 10px;" v-model="retrievePass.newPassword" placeholder="输入密码">
                <!-- <template slot="prepend"><span class="icon iconfont">&#xe62f;</span></template> -->
              </el-input>
            </div>
            <div class="inputBox">
              <div class="text">确认密码</div>
              <div class="inputBox_code" style="flex:1;margin-left: 10px;">
                <el-input type="password" style="" v-model="retrievePass.sumPassword" placeholder="确认密码">
                  <!-- <template slot="prepend">
                  <span class="icon iconfont">&#xe62e;</span>
                </template> -->
                </el-input>
                <!-- <div>
                  <span v-show="codeShow" class="codeBtn" @click="getCodePass">获取验证码</span>
                  <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span>
                </div> -->
              </div>
            </div>
            <span class="codeBtn next_box " @click="loginAndsum">确认并登录</span>
            <div style="padding-left:60px;padding-top:28px">

            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ImproveInfo from '@/components/base/improveInfo'

import Cookie from 'js-cookie'
import store from '@/store/index.js'
import { getTheCode, login, loginPassAPI, verifyCodeAPI, updatePassAPI } from '@/api/login.js'
import { getUserInfo } from '@/api/user/user.js'
export default {
  name: 'login',
  components: { ImproveInfo },
  data() {
    return {
      retrieveShow1: true,
      retrievePass: {
        phone: '',
        code: '',
        newPassword: '',
        sumPassword: ''
      },
      forgetPass: false,
      // improveInfo: true,
      improveInfo: false,
      accountInfo: {
        name: '',
        password: ''
      },
      codeOrPassword: false,
      userName: '',
      verificationCode: '',
      isNoLogin: false,
      haveRead: false,
      codeShow: true,
      codeCountNum: '',
      dialogAgreement: false,
      isRegistered: '2',
      loadingLogin: false,
      loadingLoginPass: false
    }
  },
  methods: {
    async loginAndsum() {
      if (!this.retrievePass.newPassword || !this.retrievePass.sumPassword) {
        this.$message({
          message: '内容不全，请完善',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.retrievePass.newPassword != this.retrievePass.sumPassword) {
        this.$message({
          message: '两次密码不一致',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      const response = await updatePassAPI({
        newPassword: this.retrievePass.newPassword,
        phone: this.retrievePass.phone
      })
      // console.log(res)
      const res = response.data
      if (res.code === '200') {
        if (this.isNoLogin) {
          Cookie.set('token', res.data.token, { expires: 7 })
        } else {
          Cookie.set('token', res.data.token, { expires: 1 })
        }
        this.getUserInfoData()
        // if(res.data.){}
        // console.log(res.data)
        if (res.data.cardId) {
          // this.improveInfo = true
          // return
          if (!res.data.unitName || !res.data.reName) {
            this.improveInfo = true
            return
          }
        }
        this.$message({
          message: '登录成功',
          type: 'success',
          customClass: 'messageZindex'
        })
        store.commit('SHOW_LOGIN')
        store.commit('IS_LOGIN', true)
        if (this.$route.query.origin) {
          this.$router.push({
            path: this.$route.query.origin,
            query: {
              proData: this.$route.query.proData
            }
          })
        } else {
          // 判断当前页面是否可以后退
          // 判断当前页面是否可以后退
          this.$router.back()
          // this.$router.push({
          //   path: '/index'
          // })
          // this.
        }
      } else {
        this.$message({
          message: '该手机号未绑定用户',
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    async nextStep() {
      if (!this.retrievePass.phone) {
        this.$message({
          message: '请输入手机号',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      if (!this.retrievePass.code) {
        this.$message({
          message: '请输入验证码',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      const res = await verifyCodeAPI({
        phone: this.retrievePass.phone,
        verificationCode: this.retrievePass.code
      })
      if (res.data.code == 200) {
        this.retrieveShow1 = false
      } else {
        this.$message({
          message: '验证码有误',
          type: 'error',
          customClass: 'messageZindex'
        })
      }
    },
    loginBack() {
      this.forgetPass = false
    },
    forgetPassword() {
      // this.$message.warning('请先登录')
      // this.$store.commit('resetVuex')
      // // 登录弹框
      // this.$store.commit('IS_LOGIN', false) // 清除顶部个人中心数据
      // this.$store.commit('SHOW_LOGIN') // 调用登录弹框
      this.forgetPass = true
    },
    emitImproveInfo(e) {
      // console.log(v)
      // return
      this.improveInfo = e
      // if (v == 'skip') return
      this.$message({
        message: '登录成功',
        type: 'success',
        customClass: 'messageZindex'
      })
      store.commit('SHOW_LOGIN')
      store.commit('IS_LOGIN', true)
      if (this.$route.query.origin) {
        this.$router.push({
          path: this.$route.query.origin,
          query: {
            proData: this.$route.query.proData
          }
        })
      } else {
        this.$router.push({
          path: '/index'
        })
      }
    },
    // perfectInfo() {
    //   if (!this.userInfo.reName || !this.userInfo.unitName) {
    //     this.improveInfo = true
    //   }
    // },
    loginWay(e) {
      if (e == 1) {
        this.codeOrPassword = true
      } else if (e == 2) {
        this.codeOrPassword = false
      }
    },
    async getUserInfoData() {
      const response = await getUserInfo()
      const res = response.data
      if (res.code === '200') {
        console.log('res.data')
        console.log(res.data)
        store.commit('SET_USERINFO', res.data)
        this.userInfoData = res.data
      }
    },
    forgetClose() {
      // console.log('关闭了')
      this.codeShow = true
      clearInterval(this.timer)
      this.timer = null
    },
    // 找回密码的
    async getCodePass() {
      const TIME_COUNT = 120
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.retrievePass.phone)) {
        this.$message({
          message: '手机号格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      const response = await getTheCode({ phone: this.retrievePass.phone })
      const res = response.data
      if (res.code === '200') {
        if (!this.timer) {
          this.codeCountNum = TIME_COUNT
          this.codeShow = false
          this.timer = setInterval(() => {
            if (this.codeCountNum > 0 && this.codeCountNum <= TIME_COUNT) {
              this.codeCountNum--
            } else {
              this.codeShow = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          customClass: 'messageZindex'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    async getCode() {
      const TIME_COUNT = 120
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.userName)) {
        this.$message({
          message: '手机号格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      const response = await getTheCode({ phone: this.userName })
      const res = response.data
      if (res.code === '200') {
        if (!this.timer) {
          this.codeCountNum = TIME_COUNT
          this.codeShow = false
          this.timer = setInterval(() => {
            if (this.codeCountNum > 0 && this.codeCountNum <= TIME_COUNT) {
              this.codeCountNum--
            } else {
              this.codeShow = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          customClass: 'messageZindex'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    // 阅读协议
    readAgreement() {
      this.dialogAgreement = true
    },
    login() {
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.userName)) {
        this.$message({
          message: '手机号码格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.verificationCode === '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      if (this.isRegistered === '2') {
        this.getLogin()
      } else if (this.haveRead) {
        this.getLogin()
      } else {
        this.$message({
          message: '请阅读并同意服务协议',
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    loginPass() {
      //      accountInfo: {
      //   name: '',
      //   password: ''
      // },
      if (!this.accountInfo.name) {
        this.$message({
          message: '请输入账号',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      if (!this.accountInfo.password) {
        this.$message({
          message: '请输入密码',
          type: 'warning',
          customClass: 'messageZindex'
        })
        return
      }
      this.getLogin()
    },
    async getLogin() {
      let response
      if (this.codeOrPassword) {
        this.loadingLoginPass = true
        response = await loginPassAPI({
          name: this.accountInfo.name,
          password: this.accountInfo.password
          // verificationCode: this.verificationCode,
          // type: this.isRegistered,
          // terminal: 5
        })
        this.loadingLoginPass = false
      } else {
        this.loadingLogin = true
        response = await login({
          phone: this.userName,
          verificationCode: this.verificationCode,
          type: this.isRegistered,
          terminal: 5
        })
        this.loadingLogin = false
      }
      const res = response.data
      if (res.code === '200') {
        if (this.isNoLogin) {
          Cookie.set('token', res.data.token, { expires: 7 })
        } else {
          Cookie.set('token', res.data.token, { expires: 1 })
        }
        this.getUserInfoData()
        // if(res.data.){}
        // console.log(res.data)
        if (res.data.cardId) {
          // this.improveInfo = true
          // return
          if (!res.data.unitName || !res.data.reName) {
            this.improveInfo = true
            return
          }
        }
        this.$message({
          message: '登录成功',
          type: 'success',
          customClass: 'messageZindex'
        })
        store.commit('SHOW_LOGIN')
        store.commit('IS_LOGIN', true)
        if (this.$route.query.origin) {
          this.$router.push({
            path: this.$route.query.origin,
            query: {
              proData: this.$route.query.proData
            }
          })
        } else {
          // 判断当前页面是否可以后退
          // 判断当前页面是否可以后退
          this.$router.back()
          // this.$router.push({
          //   path: '/index'
          // })
          // this.
        }
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    registered() {
      this.codeShow = true
      clearInterval(this.timer)
      this.timer = null
      this.userName = ''
      this.verificationCode = ''
      if (this.isRegistered === '1') {
        this.isRegistered = '2'
      } else {
        this.isRegistered = '1'
      }
    },
    // 关闭登录
    hiddenLoginBtn() {
      store.commit('SHOW_LOGIN')
    }
  }
}
</script>

<style lang="scss" scoped>
.main_box {
  width: 100vw;
}
.top_box {
  height: 105px;
  line-height: 105px;
  width: 1240px;
  margin: 0 auto;
  font-size: 30px;
  color: #385279;
}
.showTheLogin {
  // margin-top: 105px;
  width: 100%;
  height: 480px;
  // background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: end;
  background-image: url('https://vpigshop.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230818115017.png');
  background-size: 1920px 480px;
  background-repeat: no-repeat;
  .loginCent {
    // position: relative;
    // right: -1100px;
    margin-right: 250px;
    width: 342px;
    height: 352px;
    // margin: auto;
    border-radius: 8px;
    background-color: #ffffff;
    // animation: showRight 0.5s;
    // animation-fill-mode: forwards;
    // -webkit-animation-fill-mode: forwards;
    nav {
      // margin-bottom: 85px;
      .hiddenLoginBtn {
        a {
          float: right;
        }
      }
    }
    .loginForm {
      position: relative;
      // width: 500px;
      height: 100%;
      background: #ffffff;
      .loginTitle {
        font-family: Microsoft YaHei;
        color: #333333;
        .title {
          font-size: 36px;
        }
        .content {
          // margin: 10px 0;
          margin-bottom: 12px;
          font-size: 12px;
          span {
            color: #9e9e9e;
          }
          u {
            color: #1c72f3;
            cursor: pointer;
          }
        }
      }
      .loginFormBox {
        width: 100%;
        .inputBox {
          margin-bottom: 15px;
          .el-input {
            .iconfont {
              font-size: 20px;
              // padding: 0 10px;
            }
          }
          .codeBtn {
            width: 112px;
            height: 38px;
            border-radius: 4px;
            opacity: 1;
            background: #ff932e;
            display: block;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            letter-spacing: 0em;
            color: #ffffff;
          }
          .codeCount {
            color: #fff;
          }
        }
        .noLogin {
          display: flex;
          justify-content: end;
          font-size: 12px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          color: #9e9e9e;
          // color: #333333;
          // font-size: 18px;
          // margin: 20px 0 60px 0;
          // height: 30px;
          // align-items: center;
          // display: flex;
          // justify-content: space-between;
          >>> .el-checkbox__label {
            color: #9e9e9e;
            font-size: 12px;
            // color: #333333;
            font-weight: 400;
          }
          >>> .el-checkbox__inner {
            // background-color: #1c72f3;
            // border-color: #1c72f3;
            border: 1px solid #dcdfe6;
            width: 17px;
            height: 17px;
          }
          >>> .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #1c72f3;
            border-color: #1c72f3;
          }
          >>> .el-checkbox__inner:after {
            height: 8px;
            left: 5px;
            width: 4px;
          }
          span {
            // cursor: pointer;
            // font-size: 16px;
            // text-decoration: underline;
            // color: #666666;
          }
        }
        .registered {
          justify-content: flex-end;
        }
        .loginBtn {
          width: 296px;
          height: 38px;
          border-radius: 4px;
          background: #1c72f3;
          box-sizing: border-box;
          color: #ffffff;
          // margin: 0 auto;
          // width: 100%;
          // height: 70px;
          // background: #333333;
          // border-radius: 0;
          // border: 1px solid #333333;
          // text-align: center;
          // font-size: 20px;
          // color: $mainGlod;
          // cursor: pointer;
          &:hover {
            // border: 1px solid $mainGlod;
            background: #166cee;
          }
        }
      }
      .loginProtocol {
        font-size: 12px;
        // padding: 0 60px;
        // display: flex;
        // align-items: center;
        // height: 80px;
        // line-height: 80px;
        // border-top: 1px solid #eeeeee;
        // span {
        //   margin-left: 10px;
        // }
        span:nth-child(3) {
          color: #426bea;
          cursor: pointer;
        }
      }
      >>> .el-checkbox__label {
        color: #9e9e9e;
        font-size: 12px;
        // color: #333333;
        font-weight: 400;
      }
      >>> .el-checkbox__inner {
        // background-color: #1c72f3;
        // border-color: #1c72f3;
        border: 1px solid #dcdfe6;
        width: 17px;
        height: 17px;
        &:after {
          height: 8px;
          left: 5px;
          width: 4px;
        }
      }
      >>> .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #1c72f3;
        border-color: #1c72f3;
      }
      >>> .el-checkbox__inner:after {
        height: 8px;
        left: 5px;
        width: 4px;
      }
      // >>> .el-checkbox__inner {
      //   width: 20px;
      //   height: 20px;
      //   &:after {
      //     height: 10px;
      //     left: 7px;
      //     width: 4px;
      //   }
      // }
    }
  }
  >>> .el-dialog__body {
    max-height: 500px;
    min-height: 300px;
    overflow: auto;
  }
}
.hiddenLogin {
  display: none;
}
@keyframes showRight {
  from {
    width: 560px;
    opacity: 0;
  }
  to {
    width: 600px;
    opacity: 1;
    display: block;
  }
}
.top_login {
  height: 90px;
  // background-color: #bfa;
}
.top_login_text {
  border-bottom: 1px solid #d8d8d8;
  height: 90px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  color: #242e3d;
  div {
    &:hover {
      cursor: pointer;
    }
  }
}
.content_box {
  padding: 12px 20px 20px;
  // margin-top: 20px;
}
.loginBtn_box {
  text-align: center;
  position: absolute;
  bottom: 37px;
  left: 50%;
  transform: translateX(-50%);
}
.inputBox >>> .el-input-group__prepend {
  border: none;
  background: #f5f6f9;
}
.inputBox >>> .el-input__inner {
  border: none;
  background: #f5f6f9;
  padding: 0;
}
.bot_for .inputBox >>> .el-input__inner {
  padding: 0 15px;
}
.activeLogin {
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;

  color: #1c72f3;
}
.forget_pass {
  display: flex;
  justify-content: end;
  font-size: 12px;
  font-weight: normal;
  color: #9e9e9e;
}
.top_for {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #8592a5;
  height: 100px;
  border-bottom: 1px solid rgba(133, 146, 165, 0.6);
  img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
.bot_for {
  width: 350px;
  margin: 100px auto 0;
  .inputBox {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .text {
      width: 60px;
      // height: 40px;
      font-size: 14px;
      color: #8592a5;
    }
  }
  .codeBtn {
    width: 112px;
    height: 38px;
    border-radius: 4px;
    opacity: 1;
    background: #1c72f3;
    display: block;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0em;
    color: #ffffff;
  }
  .codeCount {
    color: #fff;
  }
  .next_box {
    margin-left: 60px;
    width: 280px;
    margin-top: 36px;
  }
  .back_login {
    color: #1c72f3;
  }
}

.inputBox_code {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Improve_info >>> .el-dialog {
  border-radius: 8px;
}
.Improve_info >>> .el-dialog__header {
  display: none;
}
.forget_dialog >>> .el-dialog {
  border-radius: 8px;
}
.forget_dialog >>> .el-dialog__header {
  display: none;
}
</style>
